<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>canvas画板</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./assets/layui/css/layui.css" type="text/css">
    <script src="./assets/icon/iconfont.js"></script>
    <style>
        #canvasShowPicture:hover{
            cursor: crosshair;
            box-shadow: 1px 1px 1px 1px #c2c2c2;
            border-radius:10px;
        }
        .hand:hover{
            cursor: pointer;
        }
        .icon {
            width: 1em; height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div style="width:900px;margin:0 auto;padding-top:30px;">
        <img src="./assets/img/IMG_4479.JPG" style="width:65px;height:65px;border-radius:50%;">
        <span style="margin-left:50px;font-size:25px;">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-icon--"></use>
            </svg> canvas画板
        </span>
        <div style="width:65px;">ShoreyCai</div>
    </div>
    <div style="margin-top:10px;"></div>

    <div style="border:solid #d2d2d2 1px;border-radius:5px;width:900px;height:500px;
    margin:0 auto;background:#fff;">
        <canvas id="canvasShowPicture" width="900px" height="500px"></canvas>
    </div>
    <div style="width:900px;margin:0 auto;padding-top:10px;">
        <div style="float:left;">
            <button class="layui-btn layui-btn-sm layui-btn-primary" id="drowWrite" style="width:75px;">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-huabi"></use>
                </svg> 画笔
            </button>
        </div>
        <div class="select" style="float:left;">
                <div id="drowGraphDiv" class="selectedCommonShapeView">
                    <div>
                        <button class="layui-btn layui-btn-sm layui-btn-primary" id="drowTypeBtn" style="width:75px;">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-changyong2"></use>
                            </svg> 常用
                        </button>
                    </div>
                    <div class="more"></div>  
                </div>

                <div id="allGraphTypeShow" style="position:absolute;">
                    <div style="margin-top:10px;background:#eeeeee;padding:8px;border-radius:2px;">
                        <button class="layui-btn layui-btn-sm layui-btn-primary" id="drowLine">
                            直线
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary" id="drowRect">
                            矩形
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary" id="drowTri">
                            三角
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary" id="drowCirle">
                            圆
                        </button>
                    </div>
                </div>
        </div>
        <div style="float:left;">
            <button class="layui-btn layui-btn-sm layui-btn-primary" id="brushSize" style="width:75px;">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bianjidaxiao"></use>
                </svg> 大小
            </button>
            <div id="selectBrushSize" style="position:absolute;">
                <div style="margin-top:10px;background:#eeeeee;padding:8px;border-radius:2px;">
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="lineWith_4">
                        小号
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="lineWith_6">
                        默认
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="lineWith_10">
                        大号
                    </button>
                </div>
            </div>
        </div>
        <div style="float:left;">
            <button class="layui-btn layui-btn-sm layui-btn-primary" id="brushColor" style="width:75px;">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yansexuanzeqi"></use>
                </svg> 颜色
            </button>
            <div id="selectBrushColor" style="position:absolute;">
                <div style="margin-top:10px;background:#eeeeee;padding:8px;border-radius:2px;">
                        <button class="layui-btn layui-btn-sm layui-btn-primary" 
                        id="brush_fe403c" style="background-color:#fe403c">
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary" 
                        id="brush_ffcb37" style="background-color:#ffcb37">
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary" 
                        id="brush_fefe4d" style="background-color:#fefe4d">
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary" 
                        id="brush_4acd85" style="background-color:#4acd85">
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary" 
                        id="brush_4bcbfb" style="background-color:#4bcbfb">
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary" 
                        id="brush_4b9ed8" style="background-color:#4b9ed8">
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary" 
                        id="brush_000000" style="background-color:#000000">
                        </button>
                </div>
            </div>
        </div>

        <div style="float:left;">
            <button class="layui-btn layui-btn-sm layui-btn-primary" id="rubberPicture" style="width:75px;">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiangpica"></use>
                </svg> 橡皮
            </button>
        </div>
        <div style="float:left;">
            <button class="layui-btn layui-btn-sm layui-btn-primary" id="prevDrowStep" style="width:75px;">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon--shangyibu"></use>
                </svg> 上一步
            </button>
        </div>
        <div style="float:left;">
            <button class="layui-btn layui-btn-sm layui-btn-primary" id="nextDrowStep" style="width:75px;">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon--xiayibu"></use>
                </svg> 下一步
            </button>
        </div>
        <div style="float:left;">
            <button class="layui-btn layui-btn-sm layui-btn-primary" id="cleanAllDrow" style="width:75px;">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-clean"></use>
                </svg> 清除
            </button>
        </div>
    </div>

    <div style="clear:both;width:100%;height:50px;"></div>

    

<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./assets/layui/layui.js"></script>
<script type="text/javascript" src="./js/drowgraph.js"></script>

</body>

</html>
